---
title: Input
description: Shows an input component.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/input?raw';

<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/input">
  Demo
</LinkButton>

<br />

Shows an input component.

## Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add input
    ```
  </TabItem>
  <TabItem label='Manual'>
**Copy/paste the following code to `~/components/ui/input.tsx`**

<Code code={importedCode} lang="tsx" title="~/components/ui/input.tsx" />
  </TabItem>
</Tabs>


## Usage

```tsx
import { Input } from '~/components/ui/input';
import { Text } from '~/components/ui/text';

function Example() {
  const [value, setValue] = React.useState('');

  const onChangeText = (text: string) => {
    setValue(text);
  };

  return (
      <Input
        placeholder='Write some stuff...'
        value={value}
        onChangeText={onChangeText}
        aria-labelledby='inputLabel'
        aria-errormessage='inputError'
      />
  );
}
```

## Props

### Input

Extends [`Text Input`](https://reactnative.dev/docs/textinput#props) props
        
